<template>
  <div class="app-container">
    <lst-page-container>
      <template slot="query">
        <el-form :model="queryParams" :rules="queryRules" ref="queryForm" size="small" :inline="true"
                 label-width="80px">
          <!--          <el-form-item label="所属组织" prop="parentCode">-->
          <!--            <el-cascader-->
          <!--                clearable-->
          <!--                :props="{value:'orgCode',label:'orgName',checkStrictly: true }"-->
          <!--                v-model="queryParams.parentCode"-->
          <!--                :options="options"></el-cascader>-->
          <!--          </el-form-item>-->
          <el-form-item label="组织类型" prop="orgType">
            <el-select v-model="queryParams.orgType" placeholder="组织类型" clearable>
              <el-option
                  v-for="dict in dict.type.enum_dept_level"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" prop="keyword">
            <el-input
                v-model="queryParams.keyword"
                placeholder="请输入关键字"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="table">
        <el-table @selection-change="handleSelectionChange" v-loading="loading" :data="dataList" ref="defectTable">
          <el-table-column type="selection" width="55" align="center"/>
          <!--              <el-table-column label="组织编码" align="center" prop="orgCode"/>-->
          <el-table-column label="组织名称" align="center" prop="orgName"/>
          <el-table-column label="组织类型" align="center" prop="orgTypeName"/>
        </el-table>
      </template>
      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
      </template>
    </lst-page-container>
  </div>
</template>

<script>
import {isArr} from "@/utils/arrayUtil";
import {getDeptTree, queryOrgList} from "@/api/system/org";

export default {
  dicts: ['enum_dept_level'],

  data() {
    return {
      dataList: [],
      total: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orgType: null,
        parentCode: null,
        keyword: null,
      },
      options: [],
      queryRules: {
        // orgType: [
        //   {required: true, message: "组织类型不能为空", trigger: "blur"}
        // ]
      },
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.$emit('change', selection)
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      let owner = this
      let {queryParams: {parentCode, orgType, keyword, pageSize, pageNum}} = owner
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          const queryParams = {orgType, keyword, pageSize, pageNum}
          owner.startLoading('正在加载....')
          queryOrgList(queryParams).then(response => {
                owner.dataList = response.rows;
                owner.total = response.total;
              }
          ).finally(() => {
            owner.endLoading()
          });
        }
      });
    },
    changeOptions(options) {
      const newOptions = [];
      options.forEach(item => {
        let {orgName, orgCode, children} = item;
        const newItem = isArr(children) ? {orgName, orgCode, children} : {orgName, orgCode,};
        if (isArr(newItem.children)) {
          // 递归处理子节点
          newItem.children = this.changeOptions(newItem.children);
        }
        newOptions.push(newItem);
      });
      return newOptions;
    },
    getTreeData() {
      this.startLoading('正在加载....')
      let owner = this
      return new Promise((resolve, reject) => {
        getDeptTree().then(res => {
          owner.options = owner.changeOptions(res.data)
          resolve(owner.options)
        }).finally(() => {
          owner.endLoading()
        })
      })
    },
  },
  created() {
    this.getTreeData()
  }
}
</script>

<style scoped>

</style>
